<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <title>腾讯智能制造云平台-产品管理</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    <link href="../assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="../assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <link rel="stylesheet" href="../assets/DataTables-1.10.15/media/css/jquery.dataTables.css">
    <link href="../css/style.css" rel="stylesheet" />
    <link href="../css/style_responsive.css" rel="stylesheet" />
    <link href="../css/style_default.css" rel="stylesheet" id="style_color" />
    <link href="../assets/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../assets/gritter/css/jquery.gritter.css" />
    <link rel="stylesheet" type="text/css" href="../assets/uniform/css/uniform.default.css" />
</head>
<body class="fixed-top">
<!-- BEGIN HEADER -->
<div id="header" class="navbar navbar-inverse navbar-fixed-top">
    <!--
    BEGIN TOP NAVIGATION BAR
     头部导航 开始
     -->
    <div class="navbar-inner">
        <div class="container-fluid">
            <!-- BEGIN LOGO -->
            <a class="brand" href="../index.html">
                <img src="../img/logo.png" alt="Tencent" />
            </a>
            <!-- END LOGO -->
            <!-- BEGIN RESPONSIVE MENU TOGGLER -->
            <a class="btn btn-navbar collapsed" id="main_menu_trigger" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="arrow"></span>
            </a>
            <div class="top-nav ">
                <ul class="nav pull-right top-menu" >
                    <!-- BEGIN SUPPORT -->
                    <!--                    <li class="dropdown mtop5">-->
                    <!--                        <a class="dropdown-toggle element" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Chat">-->
                    <!--                            <i class="icon-comments-alt"></i>-->
                    <!--                        </a>-->
                    <!--                    </li>-->
                    <!--                    <li class="dropdown mtop5">-->
                    <!--                        <a class="dropdown-toggle element" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Help">-->
                    <!--                            <i class="icon-headphones"></i>-->
                    <!--                        </a>-->
                    <!--                    </li>-->
                    <!-- END SUPPORT -->
                    <!-- BEGIN USER LOGIN DROPDOWN -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <!--                            <img src="img/avatar1_small.jpg" alt="">-->
                            <i class="icon-user"></i>
                            <span class="username">admin</span>
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <!--                            <li><a href="#"><i class="icon-user"></i> My Profile</a></li>-->
                            <!--                            <li><a href="#"><i class="icon-tasks"></i> My Tasks</a></li>-->
                            <!--                            <li><a href="#"><i class="icon-calendar"></i> Calendar</a></li>-->
                            <!--                            <li class="divider"></li>-->
                            <li><a href="/signout"><i class="icon-key"></i>退出</a></li>
                        </ul>
                    </li>
                    <!-- END USER LOGIN DROPDOWN -->
                </ul>
                <!-- END TOP NAVIGATION MENU -->
            </div>
        </div>
    </div>
    <!--
    END TOP NAVIGATION BAR
     头部导航结束
     -->
</div>
<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div id="container" class="row-fluid">
    <!-- BEGIN SIDEBAR -->
    <div id="sidebar" class="nav-collapse collapse">
        <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
        <div class="sidebar-toggler hidden-phone"></div>
        <!-- BEGIN SIDEBAR TOGGLER BUTTON -->
        <!-- BEGIN RESPONSIVE QUICK SEARCH FORM -->
        <div class="navbar-inverse">
            <form class="navbar-search visible-phone">
                <input type="text" class="search-query" placeholder="查询" />
            </form>
        </div>
        <!-- END RESPONSIVE QUICK SEARCH FORM -->
        <!-- BEGIN SIDEBAR MENU -->
        <ul class="sidebar-menu">
            <li class="has-sub ">
                <a href="../index.html" class="">
                    <span class="icon-box"> <i class="icon-dashboard"></i></span> 首页
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub active">
                <a href="../pages/prodMgr.html" class="">
                    <span class="icon-box"> <i class="icon-book"></i></span>产品管理
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub">
                <a href="../pages/shebeiMgr.html" class="">
                    <span class="icon-box"><i class="icon-cogs"></i></span>设备管理
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub">
                <a href="../pages/orderMgr.html" class="">
                    <span class="icon-box"><i class="icon-tasks"></i></span>订单管理
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub">
                <a href="../pages/pdcplaMgr.html" class="">
                    <span class="icon-box"><i class="icon-fire"></i></span>生产计划管理
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub">
                <a href="../pages/pdcsdMgr.html" class="">
                    <span class="icon-box"><i class="icon-map-marker"></i></span>生产调度管理
                    <span class="arrow"></span>
                </a>
            </li>
            <li class="has-sub">
                <a href="../pages/pdcOrdTck.html" class="">
                    <span class="icon-box"><i class="icon-file-alt"></i></span>生产订单跟踪
                    <span class="arrow"></span>
                </a>
            </li>
        </ul>
        <!-- END SIDEBAR MENU -->
    </div>
    <!-- END SIDEBAR -->
    <!-- BEGIN PAGE -->
    <div id="main-content">
        <!-- BEGIN PAGE CONTAINER-->
        <div class="container-fluid">
            <!-- BEGIN PAGE HEADER-->
            <div class="row-fluid">
                <div class="span12">
                    <!-- BEGIN THEME CUSTOMIZER-->
                    <div id="theme-change" class="hidden-phone">
                        <i class="icon-cogs"></i>
                        <span class="settings">
                                <span class="text">Theme:</span>
                                <span class="colors">
                                    <span class="color-default" data-style="default"></span>
                                    <span class="color-gray" data-style="gray"></span>
                                    <span class="color-purple" data-style="purple"></span>
                                    <span class="color-navy-blue" data-style="navy-blue"></span>
                                </span>
							</span>
                    </div>
                    <!-- END THEME CUSTOMIZER-->
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title">
                        当前位置
                        <small> 首页 </small>
                    </h3>
                    <ul class="breadcrumb">
                        <li>
                            <a href="../#"><i class="icon-home"></i></a><span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="../index.html">首页</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="../pages/prodMgr.html">产品管理</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="../pages/shebeiMgr.html">设备管理</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="../pages/orderMgr.html">订单管理</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="../pages/pdcplaMgr.html">生产计划管理</a> <span class="divider">&nbsp;</span>
                        </li>
                        <li>
                            <a href="../pages/pdcsdMgr.html">生产调度管理</a> <span class="divider">&nbsp;</span>
                        </li>

                        <li><a href="../pages/pdcOrdTck.html">生产订单跟踪</a><span class="divider-last">&nbsp;</span></li>

                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
            <div class="row-fluid">
                <div class="span12">
                    <!-- BEGIN EXAMPLE TABLE widget-->
                    <div class="widget">
                        <div class="widget-title">
                            <h4><i class="icon-reorder"></i>产品表</h4>
                            <span class="tools">
                                <a href="javascript:;" class="icon-chevron-down"></a>
                                <a href="javascript:;" class="icon-remove"></a>
                            </span>
                        </div>
                        <div class="widget-body">
                            <table class="table table-striped table-bordered table-hover display" id="prod_table_1">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th class="hidden-phone">产品编号</th>
                                    <th class="hidden-phone">产品图片</th>
                                    <th class="hidden-phone">产品名称</th>
                                    <th class="hidden-phone">工厂名称</th>
                                    <th class="hidden-phone">创建时间</th>
                                    <th class="hidden-phone">更新时间</th>
                                    <th class="hidden-phone">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- END EXAMPLE TABLE widget-->
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>
        <!-- END PAGE CONTAINER-->
    </div>
    <!-- END PAGE -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<div id="footer">
    2019 &copy; 腾讯.智能制造.云平台
    <div class="span pull-right">
        <span class="go-top"><i class="icon-arrow-up"></i></span>
    </div>
</div>
<!-- END FOOTER -->

<!-- 模态框（Modal） -->
<div class="modal fade" id="product_Modal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="product_Modal_Label"></h4>
            </div>
            <div class="modal-body product_Modal_body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary product_Modal_false" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-default product_Modal_enter">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!-- BEGIN JAVASCRIPTS -->
<!-- Load javascripts at bottom, this will reduce page load time -->
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../js/jquery.blockui.js"></script>
<!-- ie8 fixes -->
<!--[if lt IE 9]>
<script src="../js/excanvas.js"></script>
<script src="../js/respond.js"></script>
<![endif]-->
<script type="text/javascript" src="../assets/uniform/jquery.uniform.min.js"></script>
<script src="../assets/DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
<script src="../assets/gritter/js/jquery.gritter.js"></script>
<!--<script type="text/javascript" src="../assets/data-tables/DT_bootstrap.js"></script>-->
<script src="../js/scripts.js"></script>
<script>
    jQuery(document).ready(function() {
        // initiate layout and plugins
        // App.setMainPage(true);

        App.init();

        /**
         * 1. https://www.cnblogs.com/wenhainan/p/10446512.html
         * 2. https://www.cnblogs.com/xiashengwang/p/8087181.html
         * 3. https://www.cnblogs.com/GaiaBing/p/9317702.html
         * 4. [重绘表格](https://blog.csdn.net/qcp1020/article/details/78919950)
         * 5. [datatables表格行内编辑的实现](https://www.cnblogs.com/GaiaBing/p/9317702.html)
         */


        let table = $('#prod_table_1').DataTable({
            processing : true,//是否显示加载中提示
            autoWidth: false,//是否自动计算表格各列宽度
            info: true,//是否显示页数信息
            paging: true,// 是否允许翻页，设成false，翻页按钮不显示
            searching: false,//是否显示搜索框
            ordering:true,//是否允许排序
            serverSide: false,//是否从服务器获取数据
            responsive: true, //开启响应式
            stateSave: false,//页面重载后保持当前页
            lengthChange: true,//是否显示每页大小的下拉框
            iDisplayStart: 0,
            iDisplayLength: 5,
            lengthMenu: [5, 10, 15,25],//长度菜单
            pageLength :5,//默认每页显示多少条记录
            bLengthChange : true,//是否显示每页大小的下拉框
            pagingType: "full_numbers",//分页样式
            language: {
                lengthMenu: "每页显示 _MENU_条数据",
                zeroRecords: "没有匹配的数据",
                info: "第_PAGE_页/共 _PAGES_页 ( 共\_TOTAL\_条数据 )",
                infoEmpty: "没有符合条件的记录",
                search: "查找",
                infoFiltered: "(从 _MAX_条记录中过滤)",
                paginate: { "first": "首页 ", "last": "末页", "next": "下一页", "previous": "上一页" }
            },
            scrollX: true,//横向滑动
            ajax:{
                url:"/selectAllProduct",
                dataSrc: "data",
                type: "POST",
            },
            columns: [
                {
                    data: "id"
                },
                {
                    data:"productNum"
                },
                {
                    "data": "productImgUrl",
                    render:function (data,type,row,meta) {
                        if(!data){
                            return '<img class="avatar" src="../img/gallery/photo3.jpg" alt="" width="50" height="50">';
                        }
                    }
                },
                {
                    data:"productName"
                },
                {
                  data:"tsmcpFactory.factoryName"
                },
                {
                    data:"createTime"
                },
                {
                    data:"updateTime"
                },
                {
                    data:null,
                    render:function (data,type,row,meta) {
                        return '<button class="btn mini black btn_add" style="margin-right: 5px;"><i class="icon-plus"></i> 添加</button>' +
                            '<button class="btn mini purple btn_edit" style="margin-right: 5px;"><i class="icon-edit"></i> 编辑</button>' +
                            '<button class="btn mini black btn_delete"><i class="icon-trash"></i> 删除</button>';
                    },
                    createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
                        $(cell).children("button").click(function () {
                           if($(this).hasClass("btn_edit")){
                               console.info("btn_edit");
                           }
                            if($(this).hasClass("btn_delete")){
                                console.info("btn_delete");
                                /**
                                 * 标题 #product_Modal_Label
                                 * 主体 .product_Modal_body
                                 * 确定 .product_Modal_enter
                                 * 取消 .product_Modal_false
                                 */
                                $("#product_Modal_Label").text("确定删除");
                                $(".product_Modal_body").text("");
                                mes.btn = "btn_delete";
                                mes.data = rowData;
                                $('#product_Modal').modal('show');
                            }
                            if($(this).hasClass("btn_add")){
                                console.info("btn_add");
                            }
                        });
                    }
                }
            ],
            rowCallback: function(row,data) {}
        });

        let mes = {};
        $(".product_Modal_enter").click(function () {
            console.info(mes.btn);
            console.info(mes.data);
            $.ajax({
                url:"/deleteProductByProductId",
                type:"POST",
                data:{
                    productId:mes.data.id
                },
                dataType:"json",
                beforeSend:function (XMLHttpRequest) {},
                success:function (data,textStatus,XMLHttpRequest) {
                    console.info(data);
                    if(data){
                        //成功刷新表格
                        table.ajax.url( '/selectAllProduct' ).load();
                    }else{
                        //失败给出提示
                        $.gritter.add({
                            title: '',
                            text: '删除失败，请稍后再试。。。。'
                        });
                    }
                    $('#product_Modal').modal('hide');
                },
                error:function (XMLHttpRequest,textStatus,errorThorwn) {
                    console.error(XMLHttpRequest);
                    console.error(textStatus);
                    console.error(errorThorwn);
                    $('#product_Modal').modal('hide');
                    $.gritter.add({
                        title: '',
                        text: '删除失败，请稍后再试。。。。'
                    });
                },
                complete:function (XMLHttpRequest,textStatus) {}
            })
        });

    });
</script>
<!-- END JAVASCRIPTS -->
</body>
</html>